<include file="Public:head"/>


	<div >
		
		<div class="smd">
			<div></div>
			<br>
			<br>
			
<div>培芳餐点:  &nbsp童年的味道，点亮的星空</div>
<br>
<br>
	
			<canvas id="myCanvas">

				
			


			</canvas>

	
			<br>

		</div>
		<img src="__IMG__/pf.jpg" alt="">
	</div>


   <style type="text/css">
      #myCanvas {
        height: 250px; width:480px; border: 0px solid black;margin-top: 0px;margin-left: -100px;
      }
    </style>


<script>
var canvas = document.querySelector("canvas"),
  ctx = canvas.getContext("2d");

var ww, wh, clipSize;

var stars = [];

function Star(x, y, kaboom) {

  this.scale = (Math.random() + 0.2) * 20;
  this.scaleSpeed = Math.random() / 5 + 0.01;
  this.x = x || Math.random() * ww;
  this.y = y || Math.random() * wh;
  this.vx = (Math.random() - 0.5) * (kaboom ? 10 : 4);
  if (kaboom) {
    this.vy = (Math.random() - 0.5) * 10;
  } else {
    this.vy = Math.random() * 3;
  }
  this.opacity = 1;
  this.opacitySpeed = Math.random() / 100;
  this.rotate = Math.random() * Math.PI;
  this.rotateSpeed = (Math.random() - 0.5) * 0.1;
  this.color = "hsl(" + (~~(Math.random() * 30) + 200) + ",60%,60%)";
  this.out = [];
  this.in = [];
  for (var i = 0; i < 5; i++) {
    var x = Math.cos(i / 5 * Math.PI * 2) * this.scale;
    var y = Math.sin(i / 5 * Math.PI * 2) * this.scale;
    this.out.push([x, y]);

    var x = Math.cos((i + 0.5) / 5 * Math.PI * 2) * this.scale * 0.5;
    var y = Math.sin((i + 0.5) / 5 * Math.PI * 2) * this.scale * 0.5;
    this.in.push([x, y]);
  }
  
  this.image = document.createElement('canvas');
  this.image.width = this.scale*4;
  this.image.height = this.scale*4;
  this.ctx = this.image.getContext('2d');
  this.ctx.translate(this.scale*2, this.scale*2);
  this.ctx.beginPath();
  this.ctx.moveTo(this.in[0][0], this.in[0][1]);
  for (var i = 0; i < 5; i++) {
  this.ctx.bezierCurveTo(this.out[i][0], this.out[i][1], this.out[i][0], this.out[i][1], this.in[i][0], this.in[i][1]);
  }
  this.ctx.bezierCurveTo(this.out[0][0], this.out[0][1], this.out[0][0], this.out[0][1], this.in[0][0], this.in[0][1]);
  this.ctx.closePath();
  this.ctx.fillStyle = this.color;
  this.ctx.shadowColor = this.color;
  this.ctx.shadowBlur = 20;
  this.ctx.fill();

}
Star.prototype.draw = function(i) {

  //Update
  this.rotate += this.rotateSpeed;
  this.scale = Math.max(0, this.scale - this.scaleSpeed);
  this.vy = Math.min(10, this.vy + 0.005);
  this.x += this.vx;
  this.y += this.vy;
  this.opacity -= this.opacitySpeed;

  ctx.save();
  ctx.globalAlpha = Math.max(this.opacity, 0);
  ctx.translate(this.x, this.y);
  ctx.scale(this.scale / 20, this.scale / 20);
  ctx.rotate(this.rotate);
  
  ctx.drawImage(this.image, -this.scale,-this.scale)

  ctx.restore();
}

var mouse = {
  x: window.innerWidth / 2,
  y: -10
}
window.addEventListener("mousemove", function(e) {
  mouse.x = e.clientX + (Math.random() - 0.5) * 25;
  mouse.x = Math.min((ww - clipSize * 2) / 2 + clipSize * 2, Math.max(mouse.x, (ww - clipSize * 2) / 2));
  mouse.y = e.clientY + (Math.random() - 0.5) * 25;
});
window.addEventListener("touchmove", function(e) {
  mouse.x = e.touches[0].clientX + (Math.random() - 0.5) * 25;
  mouse.x = Math.min((ww - clipSize * 2) / 2 + clipSize * 2, Math.max(mouse.x, (ww - clipSize * 2) / 2));
  mouse.y = e.touches[0].clientY + (Math.random() - 0.5) * 25;
});
window.addEventListener("click", function(e) {
  document.querySelector("#info").style.opacity = "0";
  for (var i = 0; i < 50; i++) {
    stars.push(new Star(mouse.x, mouse.y, true));
  }
});
window.addEventListener("touchstart", function(e) {
  document.querySelector("#info").style.opacity = "0";
  for (var i = 0; i < 50; i++) {
    stars.push(new Star(mouse.x, mouse.y, true));
  }
});
window.addEventListener("resize", onResize);

function onResize() {
  ww = canvas.width = window.innerWidth;
  wh = canvas.height = window.innerHeight;
  clipSize = Math.min(ww / 2 - 4, wh / 2 - 4);
  ctx.shadowBlur = 20;
  if(navigator.userAgent.toLowerCase().indexOf('firefox') === -1){
    ctx.globalCompositeOperation = "screen";
  }
  //Clip circle
  ctx.arc(ww / 2, wh / 2, clipSize, 0, Math.PI * 2, false);
  ctx.clip();
}

var prevA = 0;

function render(a) {
  requestAnimationFrame(render);
  ctx.clearRect(0, 0, ww, wh);

  ctx.beginPath();
  ctx.arc(ww / 2, wh / 2, clipSize, 0, Math.PI * 2, false);
  ctx.fillStyle = gradient;
  ctx.fill();

  if (a - prevA > 20) {
    stars.push(new Star(mouse.x, mouse.y));
  }
  for (var i = 0, j = stars.length; i < j; i++) {
    var star = stars[i];
    star.draw(i);
    if (
      star.x - star.scale > ww ||
      star.x + star.scale < 0 ||
      star.y - star.scale > wh ||
      star.y + star.scale < 0 ||
      star.opacity <= 0
    ) {
      stars.splice(i, 1);
      i--;
      j--;
    }
  }

}
onResize();

var gradient = ctx.createRadialGradient(0, 0, 200, 100, wh / 2, ww);
gradient.addColorStop(0, "#010810");
gradient.addColorStop(1, "#2a4770");

requestAnimationFrame(render);
</script>





<include file="Public:foot"/>
</body>
</html>